import React from 'react';

import { Icon } from 'antd';

import './index.scss';

import { List } from 'react-virtualized';

const tree = [{
    id: "1_2",
    name: "小王",
    type: 1
}, {
    id: "1_3",
    name: "小刘",
    type: 1
}, {
    id: "1_4",
    name: "小明",
    type: 1
}, {
    id: "1_5",
    name: "小王",
    type: 1
}, {
    id: "1_6",
    name: "小刘",
    type: 1
}, {
    id: "1_7",
    name: "小明",
    type: 1
}, {
    id: "1_8",
    name: "小明",
    type: 1
}, {
    id: "1_9",
    name: "小王",
    type: 1
}, {
    id: "1_10",
    name: "小刘",
    type: 1
}, {
    id: "1_11",
    name: "小明",
    type: 1
}, {
    id: '1',
    name: '模板一',
    type: 10,
    children: [{
        id: "1_1",
        name: "小李子",
        type: 1,
        children: [{
            id: "1_1_1",
            name: "小啊子",
            type: 1,
            children: [{
                id: "1_1_1_1",
                name: "小啊33子",
                type: 1
            }]
        }]
    }]
}];

var treeMap = {};
var treeFlatArr = [];
function TreeToMap(arr, map, deepIndex) {
    arr.forEach(item => {
        item['deep_index'] = deepIndex;
        map[item.id] = item;
        treeFlatArr.push(item);

        if (item['children'] && item['children'].length > 0) {
            TreeToMap(item.children, map, deepIndex + 1)
        }
    })
}

TreeToMap(tree, treeMap, 0)

console.log(treeMap, "=========treeMap============");

// List data as an array of strings
const list = [
    'Brian Vaughn',
    // And so on...
];

function rowRenderer({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
}) {
    var item = treeFlatArr[index];
    var has_child = item['children'] && item.children.length > 0;
    return (
        // <div key={key} style={style}>
        //     {treeFlatArr[index].name}
        // </div>

        <>
            <div className="member_each" deepIndex={item.deep_index} key={item.id} has_child={has_child}>
                {
                    has_child && <div className="arrow_container">
                        <Icon type="right" />
                    </div>
                }
                <span>{item.name}</span>
            </div>
        </>


    );
}

class ListView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };

    }



    TreeRender(arr, deepIndex) {
        var that = this;
        return arr.map(item => {

            var has_child = item['children'] && item.children.length > 0;
            item['deep_index'] = deepIndex
            return <>
                <div className="member_each" deepIndex={deepIndex} key={item.id} has_child={has_child}>
                    {
                        has_child && <div className="arrow_container">
                            <Icon type="right" />
                        </div>
                    }
                    <span>{item.name}</span>
                </div>
                {
                    has_child && that.TreeRender(item.children, deepIndex + 1)
                }
            </>

        })
    }



    render() {



        return (

            <div className="ListTreeView2">

                <div className="side_tree">

                    {
                        this.TreeRender(tree, 0)
                    }
                    <span>Tree渲染:数据源Tree,递归</span>
                </div>

                <div className="side_tree">

                    {
                        Object.entries(treeMap).map(each => {

                            console.log(each, "=========entries=========");

                            var item = each[1];

                            var has_child = item['children'] && item.children.length > 0;

                            return <>
                                <div className="member_each" deepIndex={item.deep_index} key={item.id} has_child={has_child}>
                                    {
                                        has_child && <div className="arrow_container">
                                            <Icon type="right" />
                                        </div>
                                    }
                                    <span>{item.name}</span>
                                </div>
                            </>
                        })

                    }
                    <span>TreeToMap渲染:数据源Map,由Tree递归提前生成</span>
                </div>


                <div className="side_tree">
                    <List
                        width={300}
                        height={300}
                        rowCount={Object.keys(treeMap).length}
                        rowHeight={50}
                        rowRenderer={rowRenderer}
                    />
                </div>

            </div>


        );
    }
}
export default ListView;